<!-- 设备类型统计图  -->
<template>
  <div id="device-cate-chart-main" >
    <div ref="chartCateContainer" class="my-chart-container"></div>
  </div>
</template>
<script>
import FullScreenMonitor from "@/api/FullScreenMonitor";
import echarts from 'echarts'
import {apiResult} from "@/libs/util";
export default {
  name:"DeviceCateChart",
  data(){
    return{
      api: new FullScreenMonitor(),
      chartOption:{
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c}",
        },
        title: {
          text: this.$t('reg_device_type'),//'设备接入类型',
          left: 'center',
          top: 'top',
          textStyle:{
            color: '#FFFFFF',
            fontSize: 18
          },
          padding: [
            0,  // 上
            10, // 右
            5,  // 下
            0, // 左
          ]

        },
/*        tooltip: {
          trigger: 'item'
        },*/
        legend: { //图例组件
          orient: 'vertical',
          left: 140,
          top: 30,
          align: 'left',
          itemGap: 5,
          itemWidth: 25,
          textStyle:{
            color: '#FFFFFF',
            fontSize: 10
          },
          tooltip: {
            show: true
          }
        },
        series: [
          {
            name: this.$t('reg_device_type'),//'接入设备类型',
            type: 'pie',
            left: 'left',
            radius: '50%',
            center: [80, 70],
/*            itemStyle:{
              color:['#5470c6',
                '#91cc75',
                '#fac858',
                '#ee6666',
                '#73c0de',
                '#3ba272',
                '#fc8452',
                '#9a60b4',
                '#ea7ccc'],
            },*/
            data: [
              { value: 30, name: '4G执法仪',
                itemStyle:{
                  //color: '#03259d',
                  color: '#e30c0c',
                }
              },
              { value: 40, name: '5G执法仪',
                itemStyle:{
                  color: '#8845f8',
                }
              },
              { value: 12, name: '智能安全帽',
                itemStyle:{
                  //color: '#4c24eb',
                  color: '#118c11',
                }
              },
              { value: 18, name: '国标设备',
                itemStyle:{
                  color: '#32b7f8',
                }
              }
            ],
/*            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },*/
            label: {
              show: false,
              position: 'right'
            },
          }
        ]
      }
    }
  },
  methods:{
    start(){
      //console.log("echarts=%o;chartCateContainer=%o",this.$refs.chartCateContainer)
      let mychart = echarts.init(this.$refs.chartCateContainer);
      //let mychart = this.$echarts.init(this.$refs.chartContainer);// document.getElementById('chart-container'));
      mychart.setOption(this.chartOption);
    },
    getData(){
      const that=this;
      this.api.getDeviceCountByType().then(res=>{
        //console.log("res=%o",res)
        apiResult(res.data,false,result=>{
          let chartData = [];
          let style=[];
          style.push({color: '#e30c0c'})
          style.push({color: '#8845f8'})
          style.push({color: '#118c11'})
          style.push({color: '#32b7f8'})
          //console.log(">>>>>>DeviceCateChart.getData: data=%o",res.data.data);
          if (!!res.data.data && res.data.data.length > 0){
            for(let i in res.data.data){
              //chartData.push({value: res.data.data[i].value, name: res.data.data[i].name,itemStyle:style[i]})
              chartData.push({
                value: res.data.data[i].value,
                name: this.$t("device_type_"+res.data.data[i].intId),
                itemStyle:style[i]})
            }
            that.chartOption.series[0].data=chartData;
          }
          //console.log(">>>>>>DeviceCateChart.getData: chartData=%o",chartData);
          //console.log(">>>>>>DeviceCateChart.getData: chartOption=%o",that.chartOption);
          that.start();
        });

      })
    }

  },
  mounted() {

    this.getData();

  }
}

</script>
<style lang="less">
  #device-cate-chart-main{
    width: 100%;
    height: 100%;
  }

  .my-chart-container{
    margin-top: 20px;
    width: 100%;
    height: 100%;
  }
</style>
